<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="https://i.loli.net/2021/01/31/U4mgYeHOcFLN9r2.png">
    <title>UncleKevin 凯文大叔</title>
    <link rel="stylesheet" href="css/1-首页.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
    <div class="top">
        <div class="container">
            <ul class="top-left">
                <div class="download"><li style="color: #99999962;"><a href="">客户端下载&nbsp;</a></li></div>
                <div class="log-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html">登录</a></li></div>
                <div class="sign-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html" style="color:#f26704;">注册</a></li></div>
                <script>
                    $(".log-in").hover(
                        function(){
                        $(".log-in a").css({"margin-left":"40px",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".log-in a").css({"font-weight":"normal",
                                            "margin-left":"24px",});
                        }
                    );
                    $(".sign-in").hover(
                        function(){
                        $(".sign-in a").css({"font-weight":"bold",
                                            "margin-left":"38px"});
                        },
                        function(){
                        $(".sign-in a").css({"font-weight":"normal",
                                            "margin-left":"24px"});
                        }
                    );
                    $(".download").hover(
                        function(){
                        $(".download a").css({"color":"#f26704",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".download a").css({"font-weight":"normal",
                                            "color":"#888888",});
                        }
                    );
                </script>
            </ul>
            <ul class="top-right">
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/10-我的订单.html">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html">购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">收藏夹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li><a href="">联系客服</a></li>
            </ul>
        </div>
    </div>
    <div class="top-Menu">
        <div class="container">
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/1-首页.html"><img class="logo1" src="https://i.loli.net/2021/01/31/VlOCJo75ZI61uYd.png"></a>
            <div class="input-group">
                <input type="text" class="search-bar" placeholder="&nbsp;搜索商品/类别/店铺">
                <script>
                    // 当搜索框得到焦点时，边框加粗
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("border-width","3px");
                    });
                    // 当搜索框得到焦点时，添加阴影效果
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("box-shadow","8px 8px 16px 0 #f2670434, 8px 6px 10px 0px #f2670442");
                    });
                    // 当搜索框失去焦点时，边框还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("border-width","2px");
                    });
                    // 当搜索框失去焦点时，阴影效果还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("box-shadow","none");
                    });
                </script>
                <span class="input-group-btn">
                    <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html"><button class="btn btn-default btn-search" type="button">搜索</button></a> 
                </span>
            </div>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html"><img class="shopping-car" src="https://i.loli.net/2021/01/31/u9Zo5zvIFxqDVTl.png" title="我的购物车"></a>
        </div>
    </div>
    <div class="middle">
        <div class="container">
            <div class="box">
                <ul class="image">
                    <li><img src="https://i.loli.net/2021/02/01/eVgfR3LwKWsG7PQ.png" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"></li>
                    <li><img src="https://i.loli.net/2021/02/01/Ia5OQ38DjEwGfBJ.jpg" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"/></li>
                    <li><img src="https://i.loli.net/2021/02/01/WxdFj3YPhubNn6f.jpg" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"></li>
                </ul>
                <ul class="num">
                    <li class='current'></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="left arrow"><span>‹</span></div>
                <div class="right arrow"><span>›</span></div>
            </div>
            <script type="text/javascript">
                var i=0,timer;
                var sum = $(".image li").length;
                $(function(){
                    $(".image li").eq(0).show();
                    
                    $(".box").hover(function(){
                        $(".arrow").show();
                        clearInterval(timer);
                    },function(){
                        $(".arrow").hide();
                        iLunbo();
                    })
                    iLunbo();
                    
                    $(".arrow").hover(function(){
                        clearInterval(timer);
                    });
                    /*左箭头控制轮播*/
                    $(".left").click(function(){
                        clearInterval(timer);
                        if(i==0){
                            i=sum;
                        }
                        i--;
                        startLunbo();
                        iLunbo();
                    });
                    
                    /*右箭头控制轮播*/
                    $(".right").click(function(){
                        clearInterval(timer);
                        if(i==sum-1){
                            i=-1;
                        }
                        i++;
                        startLunbo();
                        iLunbo();
                    });
                    
                    /*提示信息变换*/
                    $(".num>li").hover(function(){
                        clearInterval(timer);
                        i=$(this).index();
                        console.log(i);
                        startLunbo();
                    });
                });
                
                    /*自动轮播*/
                    function iLunbo(){
                        timer = setInterval(function(){
                            i++;
                            if(i==sum-1){
                                i=-1;
                            }
                            startLunbo();
                        },2000)
                    }
                    
                    /*图片轮播和提示信息*/
                    function startLunbo(){
                        if(i==6){
                            i=0;
                        }
                        $(".image>li").eq(i).fadeIn().siblings().fadeOut();
                        $(".num>li").eq(i).addClass("current").siblings().removeClass("current");
                    }
            </script>
            <div class="mask-layer">
                <ul class="mask-info">
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">名媛淑女馆<h>›</h></a></li></div>
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">绅士潮男馆<h>›</h></a></li></div>
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">休闲运动馆<h>›</h></a></li></div>
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">母婴幼儿馆<h>›</h></a></li></div>
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">生活家居馆<h>›</h></a></li></div>
                    <div onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html">电子数码馆<h>›</h></a></li></div>
                </ul>
            </div>
        </div>
    </div>
    <div class="cut">
        <img class="cloud" src="https://i.loli.net/2021/02/05/jYVWQ2Pn9y561xS.png"/>
        <div class="miaosha"></div>
        <div class="container">
            <div class="middle-bottom">
                <a href="">
                    <div class="SecondsKill">
                        <a href="" style="color: #fed6a6;">春节秒杀</a>
                        <img class="SecondsKill-logo" src="https://i.loli.net/2021/02/03/L8tnr1RawDMzoZC.png" alt="">
                        <img src="https://i.loli.net/2021/02/03/3gIrQ17vXSN8qm2.png" alt="">
                    </div>
                    <script>
                            $(".miaosha").hover(
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"70px",
                                                        "max-width":"70px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"120px",
                                                        "margin-top":"200px"});
                            },
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"50px",
                                                        "max-width":"50px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"157px",
                                                        "margin-top":"246px"});
                            }
                            );
                            $(".miaosha").hover(
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"30px",
                                                     "font-size":"40px"});
                            },
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"18px",
                                                     "font-size":"38px"});
                            }
                            );
                            $(".SecondsKill a").hover(
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"70px",
                                                        "max-width":"70px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"120px",
                                                        "margin-top":"200px"});
                            },
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"50px",
                                                        "max-width":"50px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"157px",
                                                        "margin-top":"246px"});
                            }
                            );
                            $(".SecondsKill a").hover(
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"30px",
                                                     "font-size":"40px"});
                            },
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"18px",
                                                     "font-size":"38px"});
                            }
                            );
                            $(".SecondsKill-logo").hover(
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"70px",
                                                        "max-width":"70px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"120px",
                                                        "margin-top":"200px"});
                            },
                            function(){
                            $(".SecondsKill-logo").css({"max-height":"50px",
                                                        "max-width":"50px",
                                                        "transition-duration":"0.5s",
                                                        "margin-left":"157px",
                                                        "margin-top":"246px"});
                            }
                            );
                            $(".SecondsKill-logo").hover(
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"30px",
                                                     "font-size":"40px"});
                            },
                            function(){
                            $(".SecondsKill a").css({"transition-duration":"0.3s",
                                                     "margin-left":"40px",
                                                     "margin-top":"18px",
                                                     "font-size":"38px"});
                            }
                            );
                    </script>
                </a>

                <a href="">
                    <div class="SecondsKill-info SecondsKill-info1">
                        <img src="https://i.loli.net/2021/02/03/Od4KQScF5fNke8H.jpg"/>
                    </div>
                    <div class="information-div information-div1"><h6 class="information information1">OMEGA(瑞士) 海马系列机械女表...</h6></div>
                    <div class="PriceColumn PriceColumn1">
                        <img src="https://i.loli.net/2021/02/04/MxPLYs9cCVzn3Ah.png"/>
                        <h style="color: #fff;float: left;position: absolute;margin-left: -145px;">¥33999</h>
                        <h style="color: #e2221bd0;float: right;position: absolute;margin-left:-62px;text-decoration: line-through;">¥41999</h>
                    </div>
                </a>
                <a href="">
                    <div class="SecondsKill-info SecondsKill-info2">
                        <img src="https://i.loli.net/2021/02/03/eDGtsaWYc4dmj8B.jpg"/>
                    </div>
                    <div class="information-div information-div2"><h6 class="information information2"> Apple iPhone 12 Pro 金色 (A2408）128G...</h6></div>
                    <div class="PriceColumn PriceColumn2">
                        <img src="https://i.loli.net/2021/02/04/MxPLYs9cCVzn3Ah.png"/>
                        <h style="color: #fff;float: left;position: absolute;margin-left: -140px;">¥7999</h>
                        <h style="color: #e2221bd0;float: right;position: absolute;margin-left:-60px;text-decoration: line-through;">¥9399</h>    
                    </div>
                </a>
                <a href="">
                    <div class="SecondsKill-info SecondsKill-info3">
                        <img src="https://i.loli.net/2021/02/03/EY12ILBvsC8MOyV.jpg"/>
                    </div>
                    <div class="information-div information-div3"><h6 class="information information3"> Apple iPad Air 2020新款 草绿色 &nbsp;(A2316）256G...</h6></div>
                    <div class="PriceColumn PriceColumn3">
                        <img src="https://i.loli.net/2021/02/04/MxPLYs9cCVzn3Ah.png"/>
                        <h style="color: #fff;float: left;position: absolute;margin-left: -140px;">¥8199</h>
                        <h style="color: #e2221bd0;float: right;position: absolute;margin-left:-60px;text-decoration: line-through;">¥8699</h>    
                    </div>
                </a>
                <a href="">
                    <div class="SecondsKill-info SecondsKill-info4">
                        <img src="https://i.loli.net/2021/02/03/eT4R3cmq7E9DBk5.jpg"/>
                    </div>     
                    <div class="information-div information-div4"><h6 class="information information4">小米11 5G 骁龙888 2K 1亿像素 55W闪充 8GB+256GB 蓝色...</h6></div>
                    <div class="PriceColumn PriceColumn4">
                        <img src="https://i.loli.net/2021/02/04/MxPLYs9cCVzn3Ah.png"/>
                        <h style="color: #fff;float: left;position: absolute;margin-left: -140px;">¥4299</h>
                        <h style="color: #e2221bd0;float: right;position: absolute;margin-left:-60px;text-decoration: line-through;">¥4099</h>    
                    </div>
                </a>
                <script>
                    $(".SecondsKill-info1").hover(
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".SecondsKill-info2").hover(
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".SecondsKill-info3").hover(
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".SecondsKill-info4").hover(
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    //分割线------------------------------------------------------------------
                    $(".information-div1").hover(
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".information-div2").hover(
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".information-div3").hover(
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".information-div4").hover(
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    //分割线------------------------------------------------------------------
                    $(".SecondsKill-info1").hover(
                        function(){
                            $(".information1").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information1").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info2").hover(
                            function(){
                            $(".information2").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information2").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info3").hover(
                            function(){
                            $(".information3").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information3").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info4").hover(
                            function(){
                            $(".information4").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information4").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    //分割线------------------------------------------------------------------
                    $(".information-div1").hover(
                            function(){
                            $(".information1").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information1").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div2").hover(
                            function(){
                            $(".information2").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information2").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div3").hover(
                            function(){
                            $(".information3").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information3").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div4").hover(
                            function(){
                            $(".information4").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information4").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                                        //分割线------------------------------------------------------------------
                    $(".PriceColumn1").hover(
                        function(){
                            $(".information1").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information1").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn2").hover(
                            function(){
                            $(".information2").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information2").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn3").hover(
                            function(){
                            $(".information3").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information3").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn4").hover(
                            function(){
                            $(".information4").css({"color":"#c81a21",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".information4").css({"color":"#999999",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn1").hover(
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info1 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".PriceColumn2").hover(
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info2 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".PriceColumn3").hover(
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info3 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                    $(".PriceColumn4").hover(
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"0px"});
                            },
                            function(){
                            $(".SecondsKill-info4 img").css({"transition-duration":"0.2s",
                                                            "margin-top":"10px"});
                            }
                    );
                                        //分割线------------------------------------------------------------------
                    $(".SecondsKill-info1").hover(
                        function(){
                            $(".PriceColumn1").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn1").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info2").hover(
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info3").hover(
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".SecondsKill-info4").hover(
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    //分割线------------------------------------------------------------------
                    $(".information-div1").hover(
                            function(){
                            $(".PriceColumn1").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn1").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div2").hover(
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div3").hover(
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".information-div4").hover(
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                                        //分割线------------------------------------------------------------------
                    $(".PriceColumn1").hover(
                        function(){
                            $(".PriceColumn1").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn1").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn2").hover(
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn2").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn3").hover(
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn3").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                    $(".PriceColumn4").hover(
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"10px 10px 20px -5px #e2231b",
                                                    "transition-duration":"0.2s"});
                            },
                            function(){
                            $(".PriceColumn4").css({"box-shadow":"none",
                                                    "transition-duration":"0.2s"});
                            }
                    );
                </script>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="container">
            <div class="picture">
                <img class="pic1" src="https://i.loli.net/2021/02/04/9HkDtg2pIVOGWJi.jpg"/>
            </div>
        </div>
        <div class="container">
            <div class="bottom-main">
            <ul class="bottom-main-ul">
                <li style="color: #99999962;"><a href="">关于我们&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">联系我们&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">合作招商&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">营销中心&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">友情链接&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">销售联盟&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">隐私政策&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">服务条款&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">风险监测&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li><a href="">English Site</a></li>
            </ul>
            </div>
            <div class="countries">
                <img src="https://i.loli.net/2021/02/05/gRUKf7AvIqsD3JB.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html> 